<template>
<div class="type-box">
    <van-nav-bar title="视频"></van-nav-bar>
    <div v-for="time in list" 
        :key="time.id.id">
        <span>{{time.id.name}}</span>
        <video   width="100%" height="40%" controls>
        <source 
        :src="myBaseUrl + time.id.src" type="video/mp4">
    </video>
    </div>
     
</div>
</template>

<script>
import { videoApi } from '../../apis/videoApi'
export default {
    data() {
        return {
            myBaseUrl: "http://localhost:15666/",
            list: {}
        }
    },
    created() {
        this.getViedoList()
    },
    methods: {
        async getViedoList() {
            let result = await videoApi()
            let arr = (result?.data || []).map(it => {
                return {
                    id: it
                }
            })
            this.list = arr
            console.log(this.list)
        }
    }
}
</script>

<style lang="less" scoped>
    .type-box {
        display: block;
        position: relative;
        height: calc(100% - 50px);
        width: 100%;
        background-color: rgb(255, 255, 255);
        overflow-x: hidden;
        > div {
            margin-top: 10px;
            background-color: #fefefe;
            span {
                display: block;
                text-align: center;
                font-weight: 100;
                font-size: 16px;
            }
        }
    }

</style>
